<template>
	<view class="container">
		<cos-swiper height="550rpx" :images="task.master_images"></cos-swiper>
		<view class="p-30 bg-white mb-20">
			<view class="font-size-extra-lg mb-10">{{ task.title }}</view>
			<view class="font-size-base text-color-assist d-flex justify-content-between">
				<view class='tags d-flex'>
					<view class='tag mr-20' :class="task.need_color">{{ task.need_label }}</view>
					<view class='tag' :class="task.reward_color">{{ task.reward_label }}</view>
				</view>
				<view class="text-color-assist">{{task.signs}}人已报名</view>
			</view>
		</view>
		<view class="p-30 bg-white mb-20 section">
			<view class="mb-10 d-flex justify-content-between">
				<view class="font-size-lg font-weight-bold title">通告流程</view>
				<view class="text-color-assist font-size-sm text-color-primary">查看攻略<u-icon name="arrow-right" size='10'></u-icon></view>
			</view>
			<view class="treasure_gameplay_steps">
				<view class="treasure_gameplay_steps_item">
				  <view class="treasure_gameplay_steps_icon"><image src="../../static/h_8.png"></image></view>
				  <view class="treasure_gameplay_steps_txt">通告报名</view>
				</view>
				<view class="treasure_gameplay_steps_item">
				  <view class="treasure_gameplay_steps_icon"><image src="../../static/h_9.png"></image></view>
				  <view class="treasure_gameplay_steps_txt">商家审核</view>
				</view>
				<view class="treasure_gameplay_steps_item">
				  <view class="treasure_gameplay_steps_icon"><image src="../../static/h_10.png"></image></view>
				  <view class="treasure_gameplay_steps_txt">交换微信</view>
				</view>
				<view class="treasure_gameplay_steps_item">
				  <view class="treasure_gameplay_steps_icon"><image src="../../static/h_11.png"></image></view>
				  <view class="treasure_gameplay_steps_txt">完成拍摄</view>
				</view>
			</view>
		</view>
		<view class="p-30 bg-white mb-20 section">
			<view class="font-size-lg font-weight-bold mb-10 title">通告要求</view>
			<view class="text-color-assist">{{task.demand}}</view>
			
		</view>
		
		<view class="p-30 bg-white mb-20 section">
			<view class="mb-40">
				<view class="font-size-lg font-weight-bold mb-10 title">模特要求</view>
				<view class="mb-10 d-flex">
					<view class="mr-40 text-color-assist">性别要求</view>
					<view>{{task.model_gender_demand}}</view>
				</view>
			</view>
			<view class="mb-40">
				<view class="font-size-lg font-weight-bold mb-10 title">拍摄要求</view>
				<view class="mb-10 d-flex">
					<view class="mr-40 text-color-assist">露脸要求</view>
					<view>{{task.model_show_face_demand}}</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-40 text-color-assist">照片数量</view>
					<view>不少于{{task.model_photo_nums}}张</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-40 text-color-assist">视频要求</view>
					<view>不少于{{task.model_video_seconds}}秒</view>
				</view>
				<view class="mb-10 d-flex" v-if="task.reference_images.length>0||task.reference_video.length>0">
					<view class="mr-40 text-color-assist flex-shrink-0">参考图</view>
					<cos-reference :images='task.reference_images'></cos-reference>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="grid">
				<view class="item">
					<u-icon name='share' size='60' @tap="showShare=true"></u-icon>
					<view>分享</view>
				</view>
			</view>
			<view class='btns w-100'>
				<button v-if='task.is_sign_up' class='w-100 border-radius-base' type="info">已报名</button>
				<button v-else class='w-100 border-radius-base' type="primary" @tap.click='signUp'>报名通告</button>
			</view>
		</view>
		
		<!-- 分享选择弹窗 -->
		<q-popup v-model="showShare">
			<view class="share-wrap" @click="showShare = false">
				<button open-type="share" class="share-item u-reset-button">
					<u-icon name="weixin-fill" size="50"></u-icon>
					<text>微信好友</text>
				</button>
				<view class="share-item" @click="showShareGuide=true">
					<u-icon name="moments" size="50"></u-icon>
					<text>分享朋友圈</text>
				</view>
				<view class="share-item" @tap="generateShareText">
					<u-icon name="file-text-fill" size="50"></u-icon>
					<text>生成文案</text>
				</view>
			</view>
		</q-popup>
		
		<!-- 分享组件 -->
		<shareGuide v-model="showShareGuide"></shareGuide>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup" @yes="loginYes"></login-popup>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import cosReference from "../../components/cos-media/cos-reference-image.vue";
import cosSwiper from '../../components/cos-media/cos-swiper.vue'
import shareGuide from "../../components/shopro-share-guide/shopro-share-guide.vue";
import loginPopup from "../../components/login-popup/login-popup.vue"
export default {
	components: {
		cosReference,
		cosSwiper,
		shareGuide,
		loginPopup
	},
	data() {
		return {
			id:'',
			showShareGuide:false,
			showShare:false,
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'task']),
	},
	onShareAppMessage(res) {
		return {
			title: this.task.title,
			path: '/pages/notice/detail?id=' + this.task.id,
		};
	},
	onShareTimeline(res) {
		return {
			title: this.task.title,
			path: '/pages/notice/detail',
			query: 'id=' + this.task.id
		}
	},
	onLoad(options) {
		this.id = options.id;
		this.getTasktask();
	},
	methods:{
		...mapMutations(['setTask']),
		async getTasktask() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			
			let res = await this.$api('taskDetail')
			let task = res.data.detail;
			this.setTask(task);
			uni.setNavigationBarTitle({title:task.title})
			uni.hideLoading();
		},
		signUp() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			uni.navigateTo({url:'/pages/sign-up/index'})
		},
		generateShareText() {
			if(!this.hasLogin) {
				this.$refs['loginPopup'].open();return;
			}
			uni.showLoading({mask: true,title: "生成中..."});
			uni.hideLoading();
		},
		loginYes() {
			this.getTasktask();
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}
	
	.divider {
		width: 1rpx;
		// background-color: rgba($color: $border-color, $alpha: 0.6);
		margin: 0 20rpx;
		height: 0.8rem;
	}
	
	.footer {
		height: 120rpx;
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 10;
		
		.grid {
			display: flex;
			align-items: center;			
			font-size: 24rpx;
			
			.item {
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				image {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		
		.btns {
			display: flex;
			
			button {
				font-size: 32rpx;
				padding: 0 40rpx;
				&:nth-child(1) {
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.tags {
		.tag {
			border-radius: 5rpx;
			padding: 0rpx 10rpx;
		}
		
		.blue {
			border: 2rpx solid rgb(29, 167, 255);
			color: rgb(29, 167, 255);
		}
		
		.red {
			border: 2rpx solid rgb(249, 53, 81);
			color: rgb(249, 53, 81);
		}
		
		.yellow {
			border: 2rpx solid #EED146;
			color: #EED146;
		}
		
		
		.fill-red {
			background-color: rgb(249, 53, 81);
			border: 2rpx solid rgb(249, 53, 81);
			color: #FFFFFF;
		}
		
		.fill-yellow {
			background-color: rgb(255, 211, 36);
			border: 2rpx solid rgb(255, 211, 36);
			color: #000000;
		}
	}
	
	.section .title::before {
	    content: "";
	    display: inline-block;
	    vertical-align: middle;
	    margin: -6rpx 10rpx 0 0;
	    width: 8rpx;
	    height: 26rpx;
	    background-color: rgb(255, 211, 36);
	}
	
	.treasure_gameplay_steps {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	}
	.treasure_gameplay_steps_item {
	    position: relative;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.treasure_gameplay_steps_icon {
	    position: relative;
	    margin: 0 auto 6rpx;
	    width: 70rpx;
	    height: 70rpx;
	}
	.treasure_gameplay_steps_icon image {
		width: 70rpx;
		height: 70rpx;
	}
	.treasure_gameplay_steps_txt {
	    color: #333;
	    font-size: 24rpx;
	    text-align: center;
	}
	.treasure_gameplay_steps_item:not(:last-child)::after {
	    position: absolute;
	    top: 38rpx;
	    right: -6rpx;
	    content: "";
	    display: block;
	    width: 20rpx;
	    height: 20rpx;
	    border-top: 2rpx solid #999;
	    border-left: 2rpx solid #999;
	    -webkit-transform-origin: 50%;
	    transform-origin: 50%;
	    -webkit-transform: rotate(135deg);
	    transform: rotate(135deg);
	}
	// 分享弹窗
	.share-wrap{
		display: flex;
		padding: 30rpx;
		width: 80%;
		margin: 0 auto;
		justify-content: space-between;
		.share-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// &:nth-child(1){
			// 	margin-right: auto;
			// }
			image{
				width: 100rpx;
				height: 100rpx;
			}
			text{
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
